body{
    overflow-y:hidden;
}
.general-layout{
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
}

/* 侧边栏导航设计 -start- */
.aside-menu{
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    align-items: center;
    background-color: rgb(36, 36, 36);
}
.aside-menu-ul{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.aside-menu-li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1rem 1rem;
}
.aside-menu-li-check{
    background-color: black;
}
.aside-menu-li:hover{
    background-color: black;
    cursor: pointer;
}
/* 侧边栏导航设计 -end- */

/* 左边区域设计 -start- */
.left-content{
    flex: 1;
    display: flex;
    flex-direction: column;
}
.left-top-nav{
    padding: 0.6rem 1rem;
    display: flex;
    justify-content: space-between;
    background-color: rgb(216, 216, 216);
}
.left-top-nav-logo{
    display: flex;
    justify-content: center;
    align-items: center;
}
.left-top-nav-right{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-right: 1rem;
}
.left-top-nav-user{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-right: 1rem;
}
.left-top-nav-right .quitBtn{
    padding: 0.3rem 0.5rem;
    font-size: 0.5rem;
    border-radius: 1rem;
    cursor: pointer;
}
.avatar-frame{
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid black;
    margin-right: 0.5rem;
}
.left-top-nav-name{
    margin-right: 1rem;
}
.avatar-frame img{
    width:100%;
}
.left-content-info{
    flex: 1;
}
.content-area{
    width: 100%;
    height: 100%;
    display: none;
}
.content-area:nth-child(1){
    display: flex;
}
.content-area-user{
    /* background-color: lightcoral; */
}
.content-area-team{
    /* background-color: seagreen; */
}
.content-area-list{
    /* background-color: sienna; */
}
.content-area-message{
    /* background-color: skyblue; */
}
/* 左边区域设计 -end- */

 /* 用户资料卡+新闻轮播图设计 -start-  */
 .left-area{
     display: flex;
     flex-direction: column;
     height: 100%;
     padding: 0rem 3rem;
 }
 .content-area-user{
    padding: 2rem;
    flex-direction: row;
 }

.user-information{
    flex: 1;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    padding: 0.8rem;
    margin-bottom: 1rem;
 }
.user-information-top{
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
}
.news{
    flex: 1;
    border-radius: 1rem;
}
.user-information-body{
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem 1rem;
}
.user-info-area{
    flex: 1;
    display: flex;
    width: 100%;
}
.user-info-area-left{
    display: flex;
    align-items: center;
}
.user-avatar-frame{
    flex: 1;
    display: flex;
    align-items: center;
    width: 6rem;
    height: 6rem;
    overflow: hidden;
    border-radius: 50%;
    border: 5px solid rgb(238, 183, 4);
}
.user-avatar-frame img{
    width: 100%;
}
.user-info-area-right{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background-color: white;
    margin-left: 2rem;
    padding: 0.4rem;
    position: relative;
}
.user-synopsis-area{
    flex: 1;
}
.user-id{
    position: absolute;
    bottom: 0.2rem;
    right: 0.2rem;
}
.user-synopsis-area{
    padding: 1rem 0rem;
}
.user-synopsis{
    padding: 1rem;
    background-color: white;
    height: 100%;
}
.user-synopsis-text{
    text-indent: 2rem;
}
.news{
    padding: 0.5rem;
    
}
.news-area{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.news-img-area{
    padding: 1rem;
}
.carousle-item{
    height: 20rem;
}
.carousel-caption{
    font-size: 1rem;
    padding: 0.5rem;
    background-color: rgba(0, 0, 0, 0.363);
}
 /* 用户资料卡+新闻轮播图设计 -end- */

/* 用户小组列表设计 -start-  */
.user-team-area{
    border-radius: 1rem;
}
.user-team-frame{
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 4px solid rgb(245, 245, 245);
}
.user-team-title{
    display: flex;
    width: 100%;
    justify-content: center;
    border-radius: 1rem 1rem 0rem 0rem;
    align-items: center;
    padding:  1rem 0rem;
    background-color: white;
}
.user-team-body{
    flex: 1;
    padding: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.user-team-bottom{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 100%;
    background-color: white;
    padding: 1.5rem;
    border-radius: 0rem 0rem 1rem 1rem;
}
.noteam{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.user-team-card{
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    padding: 1rem;
    position: relative;
    padding-bottom: 0;
}
.user-team-card-top{
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    height: 10rem;
}
.user-team-card-top-left{
    flex: 0.6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.user-team-card-top-middle{
    flex: 3;
    overflow: hidden;
    display: flex;
    padding: 1rem;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
}
.user-team-ID p{
    position: absolute;
    top: 1rem;
    right: 1rem;
}
.team-avatar-frame{
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid gray;
}
.user-team-introduce-synopsis{
    width: 100%;
}
.user-team-introduce-synopsis-p{
    text-indent: 1rem;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.user-team-card-bottom{
    display: flex;
    width: 100%;
    flex-direction: row;
    border-top: 1px solid rgb(189, 189, 189);
    padding: 0.3rem 0.3rem;
}
.user-team-tags{
    padding-left: 2rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 1;
}
.user-team-tags-list{
    display: flex;
    justify-content: center;
}
.user-team-enter{
    flex: 1;
    display: flex;
    justify-content: flex-end;
}
.user-team-tags-items{
    padding: 0.1rem 0.6rem;
    margin: 0rem 0.4rem;
    border-radius: 0.8rem;
}
/* 用户小组列表设计 -end-  */

/* 小组标签选择设计 -start- */
.tags-select{
   display: flex;
   flex-direction: column;
}
.tags-select-all{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.tags-select-items{
    margin: 1rem 0.5rem;
    padding:0.2rem 0.5rem;
    border: 1px solid rgb(19, 94, 180);
    color: rgb(19, 94, 180);
    border-radius: 1rem;
    cursor: pointer;
    transition: 0.2s;
}
.tags-selected{
    display: flex;
    flex-wrap: wrap;
}
.tags-select i{
    margin-left: 0.5rem;
}
.tags-select-items-checked{
    box-shadow: 0px 0px 10px 2px rgb(60, 151, 255);
}
/* 小组标签选择设计 -end- */

/* 小组主页内容设计 -start-  */
.content-area-team{
    padding: 4rem 8rem;
    
}
.team-page-info{
    border: 1px solid gray;
    flex: 1;
    padding: 0rem;
    display: flex;
    width: 100%;
}
.team-page-info-layout{
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

.team-page-area{
    display: flex;
    flex-direction: column;
    
}
.team-page-top{
    display: flex;
    justify-content: start;

}
.team-page-top-name{
    padding: 0.5rem 1rem;
    color: white;
    border-right: 3px solid white;
}
.team-page-top-name-checked{
    background-color: rgb(0, 85, 165);
}
.team-page-body{
    display: flex;
    flex-direction: row;
}


.team-page-info-area{
    display: flex;
    padding: 2rem;
    width: 100%;
    position: relative;
}
.team-page-info-left{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}

.team-page-avatar-frame{
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid gray;
}
.team-page-info-right{
    padding-left: 3rem;
    display: flex;
    align-items: center;
    flex: 1;
    width: 100%;
    margin-bottom: 0.25rem;
}
.team-page-info-text{
    width: 100%;
}
.team-page-info-textarea{
    width: 100%;
    padding: 1rem 1rem;
    border: 1px solid rgb(212, 212, 212);
    margin-top: 1rem;
    height: 8rem;
}
.team-page-info-textarea p{
    text-indent: 2rem;
}
.team-page-info-tags{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-top: 1px solid rgb(212, 212, 212);
    padding: 0.5rem 1rem;
}
.team-page-announcement{
    flex: 1;
    border: 1px solid gray;
    border-left: none;
    display: flex;
    flex-direction: column;
    padding: 2rem 4rem;
    align-items: center;
}
.team-page-announcement-frame{
    text-indent: 2rem;
    width: 100%;
    height: 100%;
    padding: 1rem;
    border: 1px solid rgb(212, 212, 212);
}
.team-page-bottom{
    display: flex;
    flex-direction: row;
    height: 25rem;

}
.team-page-task{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 0rem;
    width: 100%;
    border: 1px solid gray;
    border-top: none;
}
.team-page-list{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 4rem;
}
.team-lpage-list-items{
    width: 100%;
    display: flex;
    align-items: center;
    margin: 1rem 0rem;
}
.team-page-list-order{
    padding: 1.2rem 1rem;
    background-color: rgb(6, 156, 1);
    color: white;
    font-weight: bolder;
}
.team-page-task-content{
    flex: 1;
    padding-left: 1rem;
    border: 1px solid rgb(212, 212, 212);
    display: flex;
    height: 100%;
    align-items: center;
}
.team-page-memeber{
    position: relative;
    width: 100%;
    flex: 1;
    padding: 2rem 4rem;
    display: flex;
    border: 1px solid gray;
    border-left: none;
    border-top: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-page-member-list{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgb(212, 212, 212);
    height: 18rem;
    overflow-y: auto;
}
.team-page-memeber-items{
    width: 100%;
    border-bottom: 1px solid rgb(212, 212, 212);
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.team-page-memeber-items i{
    margin-right: 1rem;

}
.team-click-a{
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
}
.team-page-id{
    position: absolute;
    bottom: 0.1rem;
    right: 0.1rem;
}
.team-manage-a{
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
}
.team-invite-a{
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
}
.team-quit-a{
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
}

/* 小组主页内容设计 -end-  */

/* 小组列表部分设计 -start-  */
.content-area-list{
    padding: 3rem;
    width: 100%;
    height: 100%;
}
.group-list-area{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 6rem;
}
.group-list-area-top{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 2rem 0rem;
    border: 1px solid gray;
}
.group-list-search-area{
    display: flex;
    border: 1px solid rgb(212, 212, 212);
    position: relative;
    border: 1px solid gray;
}
.group-search-frame-input{
    width: 15rem;
    border: none;
    height: 100%;
    outline: none;
}
.group-search-icon{
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    outline: none;
    background-color: white;
}
.group-list-area-content{
    width: 100%;
    border: 1px solid gray;
    border-top: none;
    height: 40rem;
    overflow-y: auto;
}
.group-list{
    width: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid gray;
}
.group-list-items{
    display: flex;
    flex-direction: row;
    padding-left: 0.5rem;
    margin-bottom: 0.2rem;
    border-bottom: 1px solid rgb(212, 212, 212);
}
.group-infomation-area{
    flex: 1;
    display: flex;
    align-items: center;
}
.group-avatar-frame{
    width: 5rem;
    height: 5rem;

    border-radius: 50%;
    overflow: hidden;
    border: 3px solid gray;
}
.group-infomation{
    padding: 2rem 0rem;
    margin-left: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.group-list-synopsis{
    flex: 1.5;
    width: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.group-list-synopsis p{
    overflow: hidden;   
    white-space: nowrap;
    text-overflow: ellipsis;
}
.group-list-tags{
    flex: 0.6;
    display: flex;
    justify-content: center;
}
.user-team-tags-list-group{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 2rem;
}
.group-list-button{
    flex: 0.4;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    
}
.group-plus{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0rem 1rem;
    background-color: rgb(255, 208, 0);
}
.group-tags-items{
    width: 4.5rem;
    text-align: center;
    font-size: 0.5rem;
}
/* 小组列表部分设计 -end-  */

/* 消息页面设计 -start-  */
.content-area-message{
    padding: 3rem;
}
.content-area-message-area{
    width: 100%;
    height: 100%;
    padding: 1rem 8rem;
}
.content-area-message-area{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.message-list-area{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 45rem;
    border: 1px solid gray;
    padding: 1rem;
    overflow-y: auto;
}
.message-list{
    display: flex;
    width: 100%;
    flex-direction: column;
}
.message-list-items{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid gray;
    margin-bottom: 0.5rem;
}
.message-icon{
    height: 100%;
    padding: 2rem 1rem;
    background-color: rgb(52, 184, 0);
    font-size: 1.5rem;
}
.message-main{
    margin-left: 1rem;
}
.message-main span{
    color: rgb(2, 83, 206);
}
.message-operation{
    flex: 1;
    display: flex;
    justify-content: flex-end;
}
.message-operation-a{
    margin-right: 2rem;
}
/* 消息页面设计 -end- */

